<template>
  <div class="cell-form">
    <div class="cell-form-inner">
      <div class="cell-form-label">
        <div class="required">
          <span v-if="required">*</span>
        </div>
        <div
          class="label"
          :style="{
            width: labelWidth ? labelWidth + 'rpx' : 'auto',
            color: disabled ? '#767676FF' : '#1A1A1AFF',
          }"
        >
          {{ label }}
        </div>
      </div>
      <div class="cell-form-content">
        <slot />
      </div>
    </div>
    <u-line color="#E7E7E7FF" margin="0" v-if="borderBottom" />
  </div>
</template>

<script>
export default {
  name: "cell-form",
  props: {
    label: String,
    labelWidth: [Number, String],
    required: {
      type: Boolean,
      default: false,
    },
    borderBottom: {
      type: Boolean,
      default: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style lang="scss" scoped>
.cell-form {
  .cell-form-inner {
    display: flex;
    justify-content: space-between;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 44rpx;
    box-sizing: border-box;
    padding: 30rpx 0 34rpx;
    display: flex;
    align-items: flex-start;

    .cell-form-label {
      color: #767676;
      flex-shrink: 0;
      margin-right: 40rpx;
      height: 44rpx;
      line-height: 44rpx;
      display: flex;
      .required {
        width: 16rpx;
        margin-right: 8rpx;
        color: #fc5042d9;
        line-height: 50rpx;
      }
      .label {
        font-size: 28rpx;
        color: #1a1a1a;
      }
    }

    .cell-form-content {
      flex: 1;
    }
  }
}
</style>
